<!-- html -->
<template>
  <view class="container">
    <template v-for="(v, i) in tabList">
      <view class="tab-item" :key="v.id" @click="changeTabBar(i)">
        <image v-if="i == activeIndex" :src="v.select" mode=""></image>
        <image v-else :src="v.unSelect" mode=""></image>
        <view class="text">
          {{ v.title }}
        </view>
      </view>
    </template>
  </view>
</template>
<!-- js -->
<script>
export default {
  props: {
    activeIndex: {
      type: String,
      default: 0,
    },
  },
  data() {
    return {
      tabList: [
        {
          id: 1,
          title: "首页",
          unSelect: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_hone_n.png",
          select: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_hone_s.png",
          url: "/neighbor/market/index",
        },
        {
          id: 2,
          title: "探索",
          unSelect: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_type_n.png",
          select: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_type_s.png",
          url: "/neighbor/market/search/index",
        },

        {
          id: 3,
          title: "发布",
          unSelect: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_fabu.png",
          select: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_fabu.png",
          url: "/neighbor/market/send_unused/index",
        },
        {
          id: 4,
          title: "消息",
          unSelect: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_new_n.png",
          select: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_new_s.png",
          url: "/neighbor/market/news/index",
        },
        {
          id: 5,
          title: "我的",
          unSelect: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_n.png",
          select: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_s.png",
          url: "/neighbor/market/mine/index",
        },
      ],
    };
  },
  computed: {},
  watch: {
    // activeIndex(newv,old){
    // 	console.log(newv)
    // }
  },
  onLoad() {},
  onShow() {},
  methods: {
    changeTabBar(i) {
      // console.log(111);
      
      if (i != 2) {
        this.$parent.chang_bottom_tab(i);
		uni.redirectTo({
		  url: this.tabList[i].url,
		});
      }else{
		  uni.navigateTo({
		  	url: this.tabList[i].url,
		  })
	  }
    },
  },
};
</script>
<!-- css -->
<style lang="scss" scoped>
.container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  height: 90rpx;
  width: 749rpx;
  background: #ffffff;
  box-shadow: 0px -3px 3px 0px rgba(141, 141, 141, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-around;
  .tab-item {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    & > image {
      width: 51rpx;
      height: 51rpx;
    }
    .text {
      font-size: 20rpx;
      font-family: Hiragino Sans GB;
      font-weight: normal;
      color: #333333;
    }
  }
}
</style>
